<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <div class="header">
      <h1>益起行</h1>
    </div>

    <!-- 消息图标 -->
    <div class="message-icon">
      <van-icon
        name="chat-o"
        size="24"
        :badge="messageCount"
        @click="goToMessages"
      />
    </div>

    <!-- 活动发布按钮 -->
    <div class="publish-btn">
      <van-icon name="plus" size="24" color="#fff" @click="publishActivity" />
    </div>

    <!-- 海报改为轮播图 -->
    <div class="banner">
      <van-swipe autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="@/assets/helloUser.png" alt="海报1" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/swiper1.png" alt="海报2" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/swiper2.png" alt="海报3" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 我的活动 -->
    <div class="my-activities">
      <h3>我的活动</h3>
      <!-- 搜索框 -->
      <div class="search-box">
        <van-search
          v-model="searchQuery"
          placeholder="搜索活动（支持描述关键字查找）"
          @search="onSearch"
        />
      </div>
      <van-card
        v-for="activity in visibleActivities"
        :key="activity.id"
        :title="activity.title"
        :desc="activity.description"
        :thumb="activity.imageUrl"
        class="activity-card"
        @click="goToActivityDetail(activity.id)"
      />
      <van-button
        v-if="activities.length > 4"
        type="primary"
        size="small"
        class="toggle-button"
        @click="toggleActivities"
      >
        {{ showAllMyActivities ? "收起" : "展开" }}
      </van-button>
    </div>
  </div>
</template>


  
<script>
import { Button, Icon, Card, Swipe, SwipeItem } from "vant";
import userProfileApi from "@/api/userProfile.js";
import activityApi from "@/api/activity.js";

export default {
  components: {
    "van-button": Button,
    "van-icon": Icon,
    "van-card": Card,
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
  },
  data() {
    return {
      messageCount: null,
      activities: [], // 我的活动
      showAllMyActivities: false, // 控制我的活动展开/收起
      searchQuery: "", // 搜索框内容
    };
  },
  computed: {
    visibleActivities() {
      // 根据展开状态决定显示的我的活动数量
      return this.showAllMyActivities
        ? this.activities
        : this.activities.slice(0, 4);
    },
  },
  mounted() {
    this.fetchMessageCount();
    this.fetchActivities();
  },
  methods: {
    onSearch(query) {
      this.searchQuery = query;
      this.fetchActivities(query);
    },
    fetchMessageCount() {
      userProfileApi.getMessageCount().then((res) => {
        this.messageCount = res > 0 ? res : null;
      });
    },
    fetchActivities(query) {
      activityApi.getEventsOrganizer(query).then((res) => {
        console.log(res);
        this.activities = res.map((event) => {
          let imageUrl = "";
          if (event.pics) {
            let urlMatch = event.pics.match(/"(.*?)"/);
            if (urlMatch && urlMatch[1]) {
              imageUrl = urlMatch[1];
            }
          }
          return {
            id: event.id,
            title: event.name,
            description: event.description,
            imageUrl: imageUrl,
          };
        });
      });
    },
    goToActivityDetail(activityId) {
      this.$router.push({
        path: "/eventDetail",
        query: {
          id: activityId,
          role: "organizer", // 或 'organizer'，根据角色动态设置
        },
      });
    },
    toggleActivities() {
      // 切换活动的展开/收起状态
      this.showAllMyActivities = !this.showAllMyActivities;
    },
    goToMessages() {
      this.$router.push("/user/message");
    },
    publishActivity() {
      // 跳转到活动发布页
      this.$router.push("/pushEvents");
    },
  },
};
</script>

<style scoped>
/* 顶部导航栏样式 */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right, #007aff, #4a90e2);
  color: white;
  font-size: 1.5vh;
  text-align: center;
  padding: 0.03vh 0;
  font-weight: bold;
  z-index: 10;
  box-sizing: border-box;
}

/* 轮播图样式 */
.banner {
  margin-top: 10vh;
  width: 100%;
  height: 25vh;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 搜索框样式 */
.search-box {
  margin-bottom: 2vh;
}

/* 主页面样式 */
.home-page {
  padding: 0 4%;
  padding-bottom: 7vh;
  box-sizing: border-box;
  background: #f8f9fa;
}

/* 消息图标样式 */
.message-icon {
  position: absolute;
  top: 2.3vh;
  right: 5%;
  color: white;
  z-index: 10;
  font-size: 2vh;
}
/* 活动发布按钮样式 */
.publish-btn {
  position: absolute;
  top: 2.3vh;
  left: 5%;
  color: white;
  z-index: 10;
  font-size: 2vh;
}

/* 我的活动样式 */
.my-activities {
  margin-top: 5vh;
}

h3 {
  font-size: 5vh;
  margin-bottom: 2vh;
}

.activity-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.activity-card {
  width: 100%;
  margin-bottom: 2vh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 12px; /* 更圆的圆角 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
  background: #ffffff; /* 卡片背景改为白色 */
}

/* 展开/收起按钮样式 */
.toggle-button {
  width: 100%;
  margin-top: 1.5vh; /* 增加顶部间距 */
  margin-bottom: 1.5vh;
  padding: 10px 0;
  background-color: #007aff; /* 背景色 */
  border: none;
  color: white; /* 文字颜色 */
  font-size: 3.5vw; /* 根据屏幕调整字体大小 */
  border-radius: 25px; /* 圆角按钮 */
  transition: background-color 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
  text-align: center;
  font-weight: bold;
}

</style>
